import React,{useState,useEffect,memo} from 'react';
import {connect} from 'react-redux'
import LazyLoad,{forceCheck} from 'react-lazyload'
import * as actionTypes from '../shoppingcart/store/actionCreator'
import loading from '../../assets/images/loading.gif'
import * as api  from '../../api/index';
import ShopHeader from '../../components/shopping/shopheader/ShopHeader'
import SwiperImg from '../../components/shopping/swiperimg/SwiperImg';
import ListTwo from '../../components/shopping/listtwo/ListTwo';
import ListThree from '../../components/shopping/listthree/ListThree';
import ExhitionsItem from '../../components/shopping/exhitionsitem/ExhitionsItem';
import Scroll from '../../baseUI/scroll'
import img1 from '../../assets/images/img1.png'
import qiu1 from '../../assets/images/qiu1.png'
import yifu1 from '../../assets/images/yifu1.jpg'
import kuzi1 from '../../assets/images/kuzi1.jpg'
import module1 from '../../assets/images/module1.jpg'
import { Container,Container2 } from './style';


function Shopping(props) {
    const {selectGoods,setAddGoods} = props
    const [four ,setFour] = useState([
        {id:0,title:"JRs-JumpStart  黄紫色拼色篮球1个 - 500004 单个篮球 7号球 #500000000098987",before:"110",price:"90",img:qiu1},
        {id:1,title:"JRs-JumpStart  HUPU球队配色印花短袖T恤 - 100004 黑色  #560000000098987",before:"123",price:"103",img:yifu1},
        {id:2,title:"JRs-JumpStart  侧缝排球扣运动短裤 - 100004 夹花灰  #430000000098987",before:"198",price:"163",img:kuzi1},
        {id:3,title:"JRs-JumpStart  SDEX零式高达 - 100004 普通版  #430000000098987",before:"218",price:"166",img:module1},
    ])
    
    const [fake,setFake] = useState([]) 
    const [item,setItem] = useState([]) 

    const getShoppingData = () =>{
        console.log('已经开始请求数据了');
        api
            .reqShopping(item)
            .then(
                res => {
                   setFake([...fake,...res.data.data.list]);
                }
            )
    }
    useEffect(()=>{
        getShoppingData()
    },[])

    return (
        <Container>
            <ShopHeader selectGoods={selectGoods} ></ShopHeader>
            <Scroll 
                refresh={true}
                onScroll={forceCheck}>
                <div>    
                    <SwiperImg></SwiperImg>
                    <ListTwo></ListTwo>
                    <ListThree></ListThree>
                    <img src={img1} alt="" className="img1" />
                    <div className="exhibitions">
                        {
                            four.map((item,index)=>{
                                return <ExhitionsItem key={item.id} message={four[index]}/>
                            })
                        }
                        {
                            fake.map((item,index)=>{
                                return <Container2 key={index} onClick={setAddGoods.bind(null,item,selectGoods)}>
                                    <LazyLoad placeholder={ 
                                    // <img src={loading} style={{height:3.2rem,width:32rem, object-fit:'contain'}}
                                    // /> }>
                                    <img src={loading} style={{height:"3.2rem",width:"4rem"}}
                                    /> }>
                                    <img src={item.imgUrl1} className='item_img'/>
                                    </LazyLoad>
                                    <div className="title">
                                    {item.title}
                                    </div>
                                    <div className="adversement">
                                        <div className="first">
                                        情人节满39减5
                                        </div>
                                        <div className="second">
                                        情人节满199减10
                                        </div>
                                    </div>
                                    <div className="price">
                                        <div className="left">
                                        {item.pricebefore}
                                        </div>
                                        <div className="right">
                                        卷后价{item.price}
                                        </div>
                                    </div>
                                </Container2>
                            })
                        }
                    </div>
                    <div className='keep'></div>
                </div>
            </Scroll>
        </Container>
    )
}

const mapStateTopProps = (state) =>{
    return {
        selectGoods:state.shoppingCart.selectGoods
    }
}

const mapDispatchToProps = (dispatch) =>{
    return {
        setAddGoods(data,selectGoods){
            if(selectGoods.findIndex(item => item.id == data.id)==-1){
                dispatch(actionTypes.change_selectgoods(data));
               
            }else{
                let index = selectGoods.findIndex(item => item.id == data.id)
                dispatch(actionTypes.getSelectGoodsCount(data,index))
            }
        }
    }
}

export default connect(mapStateTopProps,mapDispatchToProps)(memo(Shopping))

